<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="banner">
     
    </div>
    <ul id="goods">
      <!-- <li>
        <img src="https://img12.360buyimg.com/babel/s380x300_jfs/t1/126827/13/19259/67342/60a8abe5E986230da/ef6c1e67fddb54c8.jpg" >
        <span>商品名</span>
      </li> -->
    </ul>
    <script type="text/javascript" src="js/ajax.js"></script>
    <script type="text/javascript">
      /**
       * ajax 同步：阻塞，一个请求发送后，直到返回数据才可以发送第二个请求。（体验不好，速度慢）
       * 异步：非阻塞，可以同时发送多个请求，请求返回数据的时机互不干涉。（快）
       */
      
      ajax('get','./datas/test.json',true,function(res){
        document.getElementById("banner").innerHTML = res.msg;
      });
      
      ajax('get','./datas/test2.json',true,function(res){
        var datas = res.datas;
        var str = "";
        for(var i=0;i<datas.length;i++){
          document.getElementById("goods").innerHTML += `<li>
                <img src="${datas[i].imgPath}" >
                <span>${datas[i].name}</span>
              </li>`;
        }
      });
      
      
      // var a = 4;
      // a+=1;
      // console.log(a);
      
      
      
      
      
      
      
    </script>
  </body>
</html>
